<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { stationTree } from "@/api/modules/org/tree";
import { messageWarnTip } from "@whjxtech/jxtech-component";
interface IStationTreeDialogProps {
  visible?: boolean;
  stationId?: string;
  stationName?: string;
}
const emit = defineEmits<{
  (e: "update:visible", val: boolean): void;
  (e: "update:stationId", val: string): void;
  (e: "update:stationName", val: string): void;
}>();
const props = withDefaults(defineProps<IStationTreeDialogProps>(), {
  visible: false,
  stationId: "",
  stationName: ""
});
const JxtechAsyncTreeRef = ref();

const StationTreeDialogState = reactive({
  visible: props.visible,
  stationId: props.stationId,
  stationName: props.stationName,
  loadData: (queryParams: any) => stationTree(queryParams),
  handleClose() {
    StationTreeDialogState.visible = false;
  },
  handleOk() {
    const selectedData = JxtechAsyncTreeRef.value.getSelectedData();
    if (!selectedData) {
      messageWarnTip("请先选择岗位");
      return;
    }
    StationTreeDialogState.stationId = selectedData.id;
    StationTreeDialogState.stationName = selectedData.text;
    StationTreeDialogState.visible = false;
  }
});

watch(
  () => props.visible,
  val => {
    StationTreeDialogState.visible = val;
  }
);
watch(
  () => StationTreeDialogState.visible,
  val => {
    emit("update:visible", val);
  }
);

watch(
  () => props.stationId,
  val => {
    StationTreeDialogState.stationId = val;
  }
);
watch(
  () => StationTreeDialogState.stationId,
  val => {
    emit("update:stationId", val);
  }
);

watch(
  () => props.stationName,
  val => {
    StationTreeDialogState.stationName = val;
  }
);
watch(
  () => StationTreeDialogState.stationName,
  val => {
    emit("update:stationName", val);
  }
);
</script>
<template>
  <el-dialog title="选择岗位" destroy-on-close width="40%" v-model="StationTreeDialogState.visible" append-to-body>
    <JxtechAsyncTree ref="JxtechAsyncTreeRef" :load-data="StationTreeDialogState.loadData"></JxtechAsyncTree>
    <template #footer>
      <jxtech-cancel-button @click="StationTreeDialogState.handleClose"></jxtech-cancel-button>
      <jxtech-ok-button @click="StationTreeDialogState.handleOk"></jxtech-ok-button>
    </template>
  </el-dialog>
</template>
<style scoped lang="scss"></style>
